<html>
<head>
<title>23 DOM 全选</title>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" /> 全选/全不选
		<br / >
		<input type="checkbox" name="items" value="足球">足球
		<input type="checkbox" name="items" value="篮球">篮球
		<input type="checkbox" name="items" value="羽毛球">羽毛球
		<input type="checkbox" name="items" value="乒乓球">乒乓球
		<br / >
		<input type="button" id="checkedAllBtn" value="全 选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反 选" />
		<input type="button" id="sendBtn" value="提交" />
	</form>
	<script type="text/javascript">

		var inputs = document.getElementsByName("items");
		/*
		* 全选 && 全不选
		*/
		// 1. 选获取全选标签
		//var checked_all_box =document.getElementsByName("checkedAllBox");
		var checked_all_box =document.getElementById("checkedAllBox");
		console.log(checked_all_box[0]);
		// 2. 触发click事件
		//checked_all_box[0].onclick = function(){
		checked_all_box.onclick = function(){
			//先获取标签属性
			
			console.log(inputs);
			for(var i=0 ; i<inputs.length; i++){

				//if(inputs[i].checked ){
				//inputs[i].checked = checked_all_box[0].checked;
				inputs[i].checked = this.checked;
				
				//console.log(inputs[i].checked);
			}
		} 




		/*
		* 全选
		*/
		// 1. 选获取全选标签
		var checked_all =document.getElementById("checkedAllBtn");
		// 2. 触发click事件
		checked_all.onclick = function(){
			//先获取标签属性
			checked_all_box.checked = true;
			//console.log(inputs);
			for(var i=0 ; i<inputs.length; i++){
				inputs[i].checked = true;
				//console.log(inputs[i].checked);
			}
		} 
		

		/*
		* 全不选
		*/
		// 1. 选获取全选标签
		var checked_no =document.getElementById("checkedNoBtn");
		// 2. 触发click事件
		checked_no.onclick = function(){
			//先获取标签属性
			checked_all_box.checked = false;
			//console.log(inputs);
			for(var i=0 ; i<inputs.length; i++){
				inputs[i].checked = false;

				//console.log(inputs[i].checked);
			}
		} 


		/*
		* 反选
		* 
		*/
		// 1. 选获取全选标签
		var checked_no =document.getElementById("checkedRevBtn");
		// 2. 触发click事件
		checked_no.onclick = function(){
			//进入默认设置为选中
			checked_all_box.checked = true;
			
			for(var i=0 ; i<inputs.length; i++){

				//方式1
				/*if(inputs[i].checked ){
					inputs[i].checked = false;
				}else{
					inputs[i].checked = true;

				}*/
				//方式2
				inputs[i].checked = !inputs[i].checked 



				for(var j=0 ; j<inputs.length; j++){
					if(!inputs[j].checked){
						checked_all_box.checked = false;
					}
				}
				
			}
		} 


		/*
		* 提交
		*/
		//var form =document.getElementsByTagName("form");
		//console.log("form = "+form[0]);
		var submit = document.getElementById("sendBtn");
		submit.onclick = function(){
			//alert("提交啦");
			for(var i=0 ; i<inputs.length; i++){

				if(inputs[i].checked ){
					console.log(inputs[i].value);
				}
			}
		}


		/*
		* inputs
		*/
		for(var i=0 ; i<inputs.length; i++){

			inputs[i].onclick=function(){
				//进入默认设置为选中
				checked_all_box.checked = true;
				//console.log(checked_all_box.checked );
				for(var j=0 ; j<inputs.length; j++){
					if(!inputs[j].checked){
						checked_all_box.checked = false;

						//一旦进入判断，则已经得到结果，不用再进行判断
						break;
					}
				}
			}


		}

		

		

		
	</script>
</body>


</html>